<template>
    <div class="comment">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入您将要品论的内容，最多120个字" maxlength="120" cols="30" rows="5" v-model="msg"></textarea>
         <mt-button type="primary" size="large" @click='addcomment()'>发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(items, index) in getComData" :key="index">
                <div class="cmt-title">
                    第{{ index+1 }}楼 &nbsp; 用户名：{{items.user_name}}&nbsp; 发表时间：{{items.add_time|timef}}
                </div>
                <div class="cmt-body">
                    {{items.content==='undefined'?"无评论哦~":items.content}}
                </div>
            </div>
        </div>
        <!-- 点击加载更多 -->
        <button class="mint-button mint-button--primary mint-button--large is-plain" @click='getmore'>
         <label class="mint-button-text">加载更多</label>
         </button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            pageIndex:1,
            getComData:[],
            msg:'',
        }
    },
    
    created() {
       this.getComment()
    },
    methods: {
        getComment(){
            this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex).then(function(res){
                // console.log(res.body.message)
                if(status==0){
                    this.getComData=this.getComData.concat(res.body.message) // 记录上次的数据并加载更多
                }else{ 
                    Toast('加载失败')
                }
            })
        },
        /* 加载更多按钮 */
        getmore(){
            this.pageIndex++;
            this.getComment();
        },
        /* 发表评论 
            发表评论功能
            1 文本框双向数据绑定
            2 为按钮绑定事件
            3 校验内容是否为空
            4 通过vue-resourse发送请求，吧内容提交服务器
            5 刷新页面显示内容，查看最新内容
        */
        addcomment(){
            this.$http.post('api/postcomment/'+this.$route.params.id,{content:this.msg.trim()}).then(res=>{
                // console.log(res.body)
                if(res.body.status===0){
                    Toast(res.body.message);
                    let cmt={
                        user_name:'匿名用户',
                        add_time:new Date(),
                        content:this.msg.trim()

                    }
                    this.getComData.unshift(cmt);
                }
            })
        }
    },
    props:["id"],
    

}
</script>
<style lang='scss' scoped>
    .comment{
        h3{
            text-align: center;
        }
        .cmt-list{
            margin:5px 0;
            .cmt-item {
                font-size: 13px;
                .cmt-title {
                    line-height: 30px;
                    background-color: #ccc;
                }
                .cmt-body {
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
        
    }
</style>

